<template>
    <div>
        <div class="dh" @click="tzback()"> <p class="head"> &lt; 休闲/娱乐</p></div>
        <van-tabs v-model:active="activeName">
            <van-tab title="酒吧" name="a">
                <van-row gutter="10">
                    <van-col span="24" v-for="p in play">
                        <van-card
                                :price="p.price+'/人'"
                                :desc="p.detail"
                                :title="p.title"
                                :thumb="p.imgurl"
                                @click="tzdetail(p.id)"
                        >
                            <template #tags>
                                <van-tag plain type="danger">{{p.tag1}}</van-tag>
                                <van-tag plain type="danger">{{p.tag2}}</van-tag>
                            </template>
                            <template #footer>
                                <van-rate v-model="value" />：3分
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
            </van-tab>
            <van-tab title="KTV" name="b">
                <van-row gutter="10">
                    <van-col span="24" v-for="p in play">
                        <van-card
                                :price="p.price+'/人'"
                                :desc="p.detail"
                                :title="p.title"
                                :thumb="p.imgurl"
                                @click="tzdetail(p.id)"
                        >
                            <template #tags>
                                <van-tag plain type="danger">{{p.tag1}}</van-tag>
                                <van-tag plain type="danger">{{p.tag2}}</van-tag>
                            </template>
                            <template #footer>
                                <van-rate v-model="value" />：3分
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
            </van-tab>
            <van-tab title="健身/运动" name="c">
                <van-row gutter="10">
                    <van-col span="24" v-for="p in play">
                        <van-card
                                :price="p.price+'/人'"
                                :desc="p.detail"
                                :title="p.title"
                                :thumb="p.imgurl"
                                @click="tzdetail(p.id)"
                        >
                            <template #tags>
                                <van-tag plain type="danger">{{p.tag1}}</van-tag>
                                <van-tag plain type="danger">{{p.tag2}}</van-tag>
                            </template>
                            <template #footer>
                                <van-rate v-model="value" />：3分
                            </template>
                        </van-card>
                    </van-col>
                </van-row>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "playlist",
        data(){
            return{
                play:[],
            }
        },
        setup() {
            const value = ref(3);
            return { value };
        },
        methods:{
            tzback(){
                history.back();
            },
            tzdetail(id){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push({path:"/playdetail",query:{id:id}});
            }
        },
        mounted(){
            this.axios.get("/api/play/query.do").then(res=>{
                if(res.data.code==200){
                    this.play=res.data.data;
                }
            });
        }
    }
</script>

<style scoped>
    .dh{
        height: 3rem;
    }
    .head{
        padding-top: 1rem;
        text-align: left;
        font-size: 18px;
    }
</style>